<template>
  <div class="category">
    <!-- 按钮组: 添加 / 删除选中 -->
    <el-row class="btns" style="margin: 20px">
      <el-button
        type="default"
        icon="el-icon-circle-plus-outline"
        @click="dialogVisible = true"
        >添加分类</el-button
      >
      <el-card class="article-table">
        <el-table border stripe :data="categoryData">
          <el-table-column label="id" prop="category_id"></el-table-column>
          <el-table-column label="类别" prop="category_alias"></el-table-column>
          <!-- <el-table-column
            label="文章数量"
            prop="article_total"
          ></el-table-column> -->
          <el-table-column label="操作">
            <template v-slot="category">
              <el-button
                size="mini"
                @click="
                  handleUpdate(
                    category.row.category_id,
                    category.row.category_alias
                  )
                "
              >
                编辑
                <i class="el-icon-edit"></i>
              </el-button>
              <el-button
                type="danger"
                size="mini"
                @click="
                  removeCategory(
                    category.row.category_id,
                    category.row.category_alias
                  )
                "
              >
                删除
                <i class="el-icon-delete"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-row>
    <!-- 对话框 -->
    <el-dialog
      :title="isEdit ? '修改类名' : '添加类名'"
      :visible.sync="dialogVisible"
    >
      <!-- 表单 -->
      <el-form :model="form" :rules="rules" label-width="80px" ref="category">
        <el-form-item label="类名" prop="alias">
          <el-input v-model="form.alias"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleClick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Category',
  data() {
    return {
      categoryData: [],
      dialogVisible: false, // 控制对话框是否显示
      form: {
        alias: '',
        id: null,
      },
      rules: {
        category_alias: [
          { required: true, message: '请输入类名', trigger: 'blur' },
        ],
      },
      isEdit: false, // true: 表示修改状态. false: 表示添加状态
    }
  },
  created() {
    this.getCategories()
  },
  methods: {
    handleClick() {
      // 通过this.$refs['user']得到组件对象
      this.$refs['category'].validate(async (valid) => {
        if (valid) {
          // 表单验证通过
          if (this.isEdit == false) {
            // 添加状态
            // 发送请求, 调用接口
            console.log(this.form)
            this.$http
              .post('/API/V1/admin/categories', this.form)
              .then((data) => {
                const { code, message } = data
                if (code == 0) {
                  // 清空form表单旧的输入值
                  this.$refs['category'].resetFields()

                  this.$message.success(message)
                  // 重新获取数据
                  this.getCategories()
                } else {
                  this.$message.error(message)
                }
              })
          } else {
            const { code, message } = await this.$http.put(
              '/API/V1/admin/categories/' + this.form.id,
              { alias: this.form.alias }
            )
            if (code == 0) {
              // 修改成功
              this.getCategories()
              this.$message.success(message)
            } else {
              this.$message.error(message)
            }
          }
          // 关闭对话框
          this.dialogVisible = false
        } else {
          return false
        }
      })
    },
    async handleUpdate(id, alias) {
      this.form.alias = alias
      this.form.id = id
      // 1. 显示对话框
      this.dialogVisible = true
      // 2. 改变isEdit的状态
      this.isEdit = true
    },
    //操作数据库之后再次请求类别, 返回数据未更新, 但数据库已更新
    async getCategories() {
      const {
        result: { category_statistics },
      } = await this.$http.get('/API/V1/categories/statistics')
      this.categoryData = category_statistics
      console.log(this.categoryData)
    },
    async removeCategory(id, alias) {
      const { code } = await this.$http.delete('/API/V1/admin/categories/' + id)
      if (code == 0) {
        this.$message.success(`成功删除类别${alias}`)
        this.getCategories()
      }
    },
  },
}
</script>
<style>
.btns {
  margin-top: 10px;
  padding: 10px;
}
.el-row.btns {
  background-color: rgba(0, 0, 0, 0);
}
</style>
